<template>
  <el-row :gutter="10">
    <el-col :span="4" class="left">
      <div class="title">
        <span>丨</span>设备列表
      </div><hr>
      <ul class="device">
        <li v-for="(item,index) in strategyData.deviceList" :key="index" class="li" @click="change(index)">{{ item }}</li>
      </ul>
    </el-col>


    <el-col :span="19" class="right">
      <div class="header"><span>丨</span>预警策略</div><hr>
      <div class="main">
        <el-table stripe :data="tableData" height="100%">
          <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="name" label="监测设备"></el-table-column>
        <el-table-column prop="time" label="昼夜"></el-table-column>
        <el-table-column prop="thresholdName" label="监测指标"></el-table-column>
        <el-table-column prop="rule" label="预警规则"></el-table-column>
        <el-table-column prop="last" label="持续时间"></el-table-column>
        <el-table-column prop="do" label="操作">
          <template #default="scope">
        <el-button link type="primary"  @click="deleteData(scope.$index)">
          取消
        </el-button>
          </template>
        </el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { useStrategyData } from '@/store/Warning/Warning';
import { onMounted,reactive } from 'vue';
const strategyData = useStrategyData()

onMounted(()=>{
  const ul=document.querySelectorAll('.device .li')
  ul[0].classList.add('active')
})


function change(index){
  const ul=document.querySelectorAll('.device .li')
  for(let i = 0;i<ul.length;i++){
    ul[i].classList.remove('active')      
    }    
    ul[index].classList.add('active')
    strategyData.deviceChoose = ul[index].innerText
  }

  const deleteData=(index)=>{
  tableData.splice(index, 1)
}
  const tableData = reactive(
  [
   {
    id:1,
    name:'设备1',
    time:'白天',
    thresholdName:'温度',
    rule:'大于三十',
    last:'一天',
  },
  {
    id:2,
    name:'设备2',
    time:'黑夜',
    thresholdName:'湿度',
    rule:'小于二十',
    last:'三天',
  },
  {
    id:3,
    name:'设备1',
    time:'白天',
    thresholdName:'温度',
    rule:'大于三十',
    last:'一天',
  },
  ]
  
)



</script>

<style scoped>
@import url('./Strategy.css');
</style>